<template>
  <div class="about-container">
    <div class="about-header">
      <h1>关于大学生就业成熟度评估系统</h1>
    </div>

    <div class="about-content">
      <section class="system-intro">
        <h2>系统简介</h2>
        <p>大学生就业成熟度评估系统是一个基于大语言模型技术的智能评估平台，旨在帮助大学生全面了解自己的就业准备情况，提升就业竞争力。</p>
        <p>系统通过与用户进行交互式对话，从多个维度对用户的就业成熟度进行评估，并生成详细的分析报告，为用户提供个性化的改进建议。</p>
      </section>

      <section class="assessment-process">
        <h2>评估流程</h2>
        <div class="process-steps">
          <div class="step-item">
            <div class="step-number">1</div>
            <h3>开始评估</h3>
            <p>点击首页的"开始评估"按钮，系统将为您创建一个新的评估会话</p>
          </div>
          <div class="step-item">
            <div class="step-number">2</div>
            <h3>回答问题</h3>
            <p>系统将提出一系列关于职业规划、专业能力等方面的问题，请您如实回答</p>
          </div>
          <div class="step-item">
            <div class="step-number">3</div>
            <h3>生成报告</h3>
            <p>完成所有问题后，系统将生成一份详细的评估报告</p>
          </div>
          <div class="step-item">
            <div class="step-number">4</div>
            <h3>查看建议</h3>
            <p>报告包含各维度的评分和改进建议，帮助您针对性地提升自己</p>
          </div>
        </div>
      </section>

      <section class="assessment-dimensions">
        <h2>评估维度说明</h2>
        <div class="dimensions-grid">
          <el-card v-for="(dim, index) in dimensions" :key="index" class="dimension-card">
            <h3>{{ dim.name }}</h3>
            <p>{{ dim.description }}</p>
            <div class="dimension-details">
              <p><strong>评估要点：</strong></p>
              <ul>
                <li v-for="(point, i) in dim.points" :key="i">{{ point }}</li>
              </ul>
            </div>
          </el-card>
        </div>
      </section>

      <section class="model-info">
        <h2>模型说明</h2>
        <p>本系统使用本地部署的 Qwen:7b 大语言模型作为评估引擎。Qwen:7b 是一个高性能的中文大语言模型，具有强大的理解和生成能力，能够深入分析用户的回答并提供专业的评估。</p>
        <p>系统设计确保您的对话数据仅保存在本地内存中，评估完成后可随时清除，保护您的隐私安全。</p>
      </section>

      <section class="faq">
        <h2>常见问题</h2>
        <el-collapse>
          <el-collapse-item title="评估需要多长时间？" name="1">
            <p>整个评估过程通常需要15-20分钟，系统会确保提问次数不少于12次，以获取充分的信息进行分析。</p>
          </el-collapse-item>
          <el-collapse-item title="评估报告有什么用？" name="2">
            <p>评估报告可以帮助您了解自己在就业准备方面的优势和不足，为您提供针对性的改进建议，帮助您更有效地准备就业。</p>
          </el-collapse-item>
          <el-collapse-item title="如何获得最准确的评估结果？" name="3">
            <p>请尽量如实、详细地回答系统提出的问题，提供具体的经历和想法，这样系统才能给出更准确的评估和建议。</p>
          </el-collapse-item>
          <el-collapse-item title="我的数据安全吗？" name="4">
            <p>是的，您的对话数据仅保存在本地服务器的内存中，不会被持久化存储或用于其他目的。</p>
          </el-collapse-item>
        </el-collapse>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ElCard, ElCollapse, ElCollapseItem } from 'element-plus';

// 评估维度详细信息
const dimensions = [
  {
    name: '职业认知',
    description: '对自身职业定位、行业了解和职业发展路径的认识程度',
    points: [
      '对自身优势和劣势的清晰认识',
      '对目标行业和职业的了解深度',
      '职业发展路径的规划合理性',
      '对就业市场需求的敏感度'
    ]
  },
  {
    name: '专业能力',
    description: '与所学专业相关的知识储备和实践能力',
    points: [
      '专业理论知识的掌握程度',
      '实践操作能力和项目经验',
      '解决专业问题的能力',
      '专业技能的应用水平'
    ]
  },
  {
    name: '通用技能',
    description: '沟通协作、问题解决、时间管理等职场通用能力',
    points: [
      '沟通表达能力',
      '团队协作能力',
      '问题分析和解决能力',
      '时间管理和自我管理能力'
    ]
  },
  {
    name: '求职准备',
    description: '简历制作、面试技巧、求职渠道利用等求职相关准备',
    points: [
      '简历制作的专业程度',
      '面试技巧和应对能力',
      '求职渠道的有效利用',
      '求职材料的准备完整性'
    ]
  },
  {
    name: '职业素养',
    description: '职业道德、工作态度、责任感等职业相关素养',
    points: [
      '职业道德和职业操守',
      '工作态度和责任心',
      '职业形象和礼仪',
      '学习能力和适应能力'
    ]
  },
  {
    name: '心理准备',
    description: '对职场压力、角色转变、职业挫折的心理承受能力',
    points: [
      '从学生到职场人的角色转变意识',
      '职场压力的应对能力',
      '职业挫折的心理承受能力',
      '职业期望的合理性'
    ]
  }
];
</script>

<style scoped>
.about-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
}

.about-header {
  text-align: center;
  margin-bottom: 2rem;
}

.about-header h1 {
  color: #333;
}

.about-content section {
  margin-bottom: 3rem;
}

.about-content h2 {
  color: #667eea;
  margin-bottom: 1rem;
  border-bottom: 2px solid #667eea;
  padding-bottom: 0.5rem;
}

.system-intro p {
  line-height: 1.8;
  color: #555;
}

.process-steps {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.step-item {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.step-item:hover {
  transform: translateY(-5px);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.step-item h3 {
  color: #333;
  margin-bottom: 0.5rem;
}

.step-item p {
  color: #666;
  font-size: 0.9rem;
}

.dimensions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 1.5rem;
}

.dimension-card {
  transition: transform 0.3s ease;
}

.dimension-card:hover {
  transform: translateY(-3px);
}

.dimension-card h3 {
  color: #667eea;
  margin-bottom: 0.5rem;
}

.dimension-details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

.dimension-details ul {
  margin: 0;
  padding-left: 1.5rem;
}

.dimension-details li {
  margin-bottom: 0.3rem;
  color: #555;
}

.model-info p,
.faq p {
  line-height: 1.8;
  color: #555;
}

@media (max-width: 768px) {
  .process-steps {
    flex-direction: column;
  }
  
  .dimensions-grid {
    grid-template-columns: 1fr;
  }
}
</style>